﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChangePass.aspx.cs" Inherits="ScoreManage.ChangePass" %>

<div align="center" >
  <style type="text/css">
    .spanLevelInit {display: inline-block; width: 70px; height: 30px; line-height: 30px; background: #ddd; text-align: center; margin: 4px 2px;}
    .weak {display: inline-block; width: 70px; height: 30px; line-height: 30px; background: #FF0000; text-align: center; margin: 4px 2px;}
    .medium {display: inline-block; width: 70px; height: 30px; line-height: 30px; background: #FF9900; text-align: center; margin: 4px 2px;}
    .strong {display: inline-block; width: 70px; height: 30px; line-height: 30px; background: #33CC00; text-align: center; margin: 4px 2px;}

    input {height: 20px; line-height: 20px; width: 210px; }
      .auto-style1 {
          width: 104px;
      }
      </style>

  <script type="text/javascript">
    window.onload = function () {
      var oInput = document.getElementById('txtNewPassword');  // 获取网页中ID名字为txtNewPassword的元素对象，即本网页中的新密码文本输入框对象
      oInput.value = '';                                       // 将新密码文本输入框的值设为''
      var spanWeak = document.getElementById('spanWeak');      // 获取ID为spanWeak的元素对象
      var spanMedium = document.getElementById('spanMedium');  // 获取ID为spanWeak的元素对象
      var spanStrong = document.getElementById('spanStrong');  // 获取ID为spanWeak的元素对象

      // 定义新密码文本输入框onkeyup事件处理程序
      oInput.onkeyup = function () {
        var pwd = this.value;                              // 将新密码的值赋给pwd变量
        var level = 0;                                     // 密码强度级别

        if (pwd.length == 0) level = 0;                    // 若没有输入新密码，则密码强度级别为0
        else if (pwd.length < 6) level = 1;                // 或新密码长度小于6位，则密码强度级别为1
        else
        {
          var result = 0;
          for (var i = 0, len = pwd.length; i < len; ++i) {
            result |= charType(pwd.charCodeAt(i));           // charType()函数在下面定义，具体功能看下面程序的注释
          }

          // 对result进行四次循环，计算level，其值表示新密码强度级别，即新密码中四种类型字符的种类数目
          for (var i = 0; i <= 4; i++) {
            if (result & 1) level++;                         // 如果新密码中含有第i类字符，则level增1
            result = result >>> 1;                           // 右移一位
          }
        }

        document.getElementById('txtPassLevel').value = level;  // 将新密码的强度保存在txtPassLevel文本框中，以便在隐藏代码文件中获取

        switch (level) {
          case 0:                                        // 如果密码强度级别为0
            spanWeak.className = "spanLevelInit";        // 恢复初始状态
            spanMedium.className = "spanLevelInit";
            spanStrong.className = "spanLevelInit";
            break;
          case 1:                                        // 如果密码强度级别为1
            spanWeak.className = "weak";                 // 将表示“弱”状态的span元素的样式设为weak，也就是将它们的背景颜色设为#FF0000
            spanMedium.className = "spanLevelInit";
            spanStrong.className = "spanLevelInit";
            break;
          case 2:                                        // 如果密码强度级别为2
            spanWeak.className = "medium";               // 将表示“弱”状态的span元素的样式设为medium，也就是将它们的背景颜色设为#FF9900
            spanMedium.className = "medium";             // 将表示“中”状态的span元素的样式设为medium，也就是将它们的背景颜色设为#FF9900
            spanStrong.className = "spanLevelInit";
            break;
          case 3:                                        // 如果密码强度级别为3或4
          case 4:                                        // 或三种类型的字符
            spanWeak.className = "strong";               // 将表示“弱”状态的span元素的样式设为medium，也就是将它们的背景颜色设为#33CC00
            spanMedium.className = "strong";             // 将表示“中”状态的span元素的样式设为medium，也就是将它们的背景颜色设为#33CC00
            spanStrong.className = "strong";             // 将表示“强”状态的span元素的样式设为medium，也就是将它们的背景颜色设为#33CC00
            break;
        }
      }
    }
    /*
        定义一个函数，对给定的ASCII值分为四类(判断密码类型)，返回十进制1，2，4，8
        若是数字(即ASCII值在48~57之间)，则返回1，即二进制数0001
        若是小写字母(即ASCII值在97~122之间)，则返回2，即二进制数0010
        若是大写字母(即ASCII值在65~90之间)，则返回4，即二进制数0100
        若是其它字符，则返回8，即二进制数1000
    */
    function charType(num) {
      if (num >= 48 && num <= 57) {
        return 1;
      }
      if (num >= 97 && num <= 122) {
        return 2;
      }
      if (num >= 65 && num <= 90) {
        return 4;
      }
      return 8;
    }
  </script>

    <br/>
  <form id="form1" runat="server">
  <table style="margin: 0px auto;" border="0">
    <tr>
      <td class="auto-style1">&nbsp;</td>
      <td style="width: 225px; font-size: x-large; font-weight: bold; text-align: center;">修改密码</td>
      <td style="width: 250px;">&nbsp;</td>
    </tr>
    <tr>
      <td class="auto-style1">旧&ensp;密&ensp;码：</td>
      <td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="217"></asp:TextBox></td>
      <td>
        <asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ErrorMessage="旧密码错误，请重新输入！" ForeColor="Red" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
      </td>
    </tr>
    <tr>
      <td class="auto-style1">新&ensp;密&ensp;码：</td>
      <td>
        <asp:TextBox ID="txtNewPassword" ClientIDMode="Static" runat="server" TextMode="Password" Width="217" MaxLength="20"></asp:TextBox>
        <asp:TextBox ID="txtPassLevel" ClientIDMode="Static" runat="server" style="display:none" Width="50"></asp:TextBox>
      </td>
      <td>
        <span style="color:red">*</span>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNewPassword" ErrorMessage="请输入新密码！" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtPassLevel" Display="Dynamic" ErrorMessage="密码强度必须达到中！" ForeColor="Red" MaximumValue="4" MinimumValue="2"></asp:RangeValidator>
      </td>
    </tr>
    <tr>
      <td class="auto-style1">确认密码：</td>
      <td><asp:TextBox ID="txtNewPassword2" ClientIDMode="Static" runat="server" TextMode="Password" Width="217" MaxLength="20"></asp:TextBox></td>
      <td>
        <span style="color:red">*</span>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtNewPassword2" ErrorMessage="请输入确认密码！" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtNewPassword" ControlToValidate="txtNewPassword2" ErrorMessage="确认密码与新密码必须相同！" ForeColor="Red" Display="Dynamic"></asp:CompareValidator>
      </td>
    </tr>
    <tr>
      <td class="auto-style1">密码强度：</td>
      <td><span class="spanLevelInit" id="spanWeak">弱</span><span class="spanLevelInit" id="spanMedium">中</span><span class="spanLevelInit" id="spanStrong">强</span></td>
    </tr>
    <tr>
      <td class="auto-style1">&nbsp;</td>
      <td>
        <asp:Button ID="btnOK" runat="server" Text="确认修改" Width="145px" OnClick="btnOK_Click" Height="27px" />
        <asp:Button ID="btnReturn" runat="server" Text="返回" Width="77px" OnClick="btnReturn_Click" Height="27px" CausesValidation="false" />
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <td class="auto-style1">&nbsp;</td>
      <td>
        <asp:Label ID="lblMsg" runat="server" Text="" ForeColor="Red"></asp:Label>
      </td>
      <td></td>
    </tr>
    <tr>
      <td class="auto-style1">提醒</td>
      <td colspan="2">
        新密码至少是6位字符，最多20个字符，强度至少达到中，<br>即至少包含数字、英文字母、其它字符这三种字符的二种。
      </td>
    </tr>
  </table>
  </form>
</div>

